<template>
  <ul class="footer">
    <li
    v-for="(item,index) in footerdata"
    :key="item.path"
    :class="{choose: currentIndex === index}"
    @click="tab(item.path,index)"
    >
    <i class="iconfont" v-html="item.meta.icon"></i>
    <span>{{ item.meta.title }}</span>
    </li>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'Footer',
  data () {
    return {
      currentIndex: 0
    }
  },
  computed: {
    footerdata () {
      return routes.filter(route => route.meta?.isfooter)
    }
  },
  methods: {
    tab (path, index) {
      this.currentIndex = index
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family:'iconfont';
  src:url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.eot');
  src:url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.eot?#iefix') format('embedded-opentype'),
  url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.woff2') format('woff2'),
  url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.woff') format('woff'),
  url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.ttf') format('truetype'),
  url('// at.alicdn.com/t/font_2422134_bb6ni9jxy9q.svg#iconfont') format('svg');
}

 .iconfont{
 font-family:"iconfont" !important;
 font-size:40px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;}

.footer{
  width: 750px;
  height: 98px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
  border-top: 1px solid #e4e4e4;
  box-sizing: border-box;
}
li{
  flex: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26px;
  justify-content: center;
  color: #979797;
}
.choose{
  background: linear-gradient(120deg, rgba(77, 211, 148, 1) 0%, rgba(77, 211, 148, 1) 0%, rgba(29, 189, 125, 1) 100%, rgba(29, 189, 125, 1) 100%);
  color: #fff;
}
</style>
